<!DOCTYPE html>
<html lang="en">
    <title>按钮</title>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>

		<!-- 引入样式文件 -->
		<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css"> -->
		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script> -->
		<link rel="stylesheet" href="../../css/vant.css">
		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<script src="../../js/vue.js"></script>
		<script src="../../js/vant.min.js"></script>

	</head>

	<body>
		<div id="app">
			<div>
                <van-nav-bar
                  title="标题"
                  left-text="返回"
                  right-text="按钮"
                  left-arrow
                ></van-nav-bar>
				<div style="color: #C8C9CC;30px;line-height: 30px;">按钮类型</div>
				<div style="display: inline-block;">
					<van-button type="default" style="width: 30%;margin-left: 20px;margin-top: 10px;">默认按钮</van-button>
					<van-button type="primary" style="width: 30%;margin-left: 20px;margin-top: 10px;">主要按钮</van-button>
					<van-button type="info" style="width: 30%;margin-left: 20px;margin-top: 10px;">信息按钮</van-button>
					<van-button type="warning" style="width: 30%;margin-left: 20px;margin-top: 10px;">警告按钮</van-button>
					<van-button type="danger" style="width: 30%;margin-left: 20px;margin-top: 10px;">危险按钮</van-button>
				</div>
				<div style="color: #C8C9CC;height: 30px;line-height: 30px;">朴素按钮-给宽度报错 哈哈哈</div>
				<div style="display: inline-block;">
					<van-button plain type="primary" style="width: 40%;margin-left: 20px;margin-top: 10px;">朴素按钮</van-button>
					<van-button plain type="info" style="width: 40%;margin-left: 20px;margin-top: 10px;">朴素按钮</van-button>
				</div>
				<div style="color: #C8C9CC;height: 30px;line-height: 30px;">细边框</div>
				<div style="display: inline-block;">
					<van-button plain hairline type="primary" style="width: 42%;margin-left: 20px;margin-top: 10px;">细边框按钮</van-button>
					<van-button plain hairline type="info" style="width: 42%;margin-left: 20px;margin-top: 10px;">细边框按钮</van-button>
				</div>
				<div style="color: #C8C9CC;height: 30px;line-height: 30px;">禁用状态</div>
				<div style="display: inline-block;">
					<van-button disabled type="primary" style="width: 60%;margin-left: 1%;margin-top: 10px;">禁用状态</van-button>
					<van-button disabled type="info" style="width: 60%;margin-left: 1%;margin-top: 10px;">禁用状态</van-button>
				</div>
				<div style="color: #C8C9CC;height: 30px;line-height: 30px;">加载状态</div>
				<div style="display: inline-block;">
					<van-button loading type="primary" style="margin-left: 10px;margin-top: 10px;"></van-button>
					<van-button loading type="primary" loading-type="spinner" style="margin-left: 10px;margin-top: 10px;"></van-button>
					<van-button loading type="info" loading-text="加载中..." style="margin-left: 10px;margin-top: 10px;"></van-button>
				</div>
				<div style="color: #C8C9CC;height: 30px;line-height: 30px;">按钮形状</div>
				<div style="display: inline-block;">
					<van-button square type="primary" style="margin-left: 10px;margin-top: 10px;">方形按钮</van-button>
					<van-button round type="info" style="margin-left: 10px;margin-top: 10px;">圆形按钮</van-button>
				</div>
				<div style="color: #C8C9CC;height: 30px;line-height: 30px;">图标按钮</div>
				<div style="display: inline-block;">
					<van-button icon="plus" type="primary" style="margin-left: 10px;margin-top: 10px;"></van-button>
					<van-button icon="plus" type="primary" style="margin-left: 10px;margin-top: 10px;">按钮</van-button>
					<van-button icon="https://img.yzcdn.cn/vant/user-active.png" type="info" style="margin-left: 10px;margin-top: 10px;">
					  按钮
					</van-button>
				</div>
				<div style="color: #C8C9CC;height: 30px;line-height: 30px;">按钮尺寸</div>
				<div style="display: inline-block;">
					<van-button type="primary" size="large" style="margin-left: 10px;margin-top: 10px;">大号按钮</van-button>
					<van-button type="primary" size="normal" style="margin-left: 10px;margin-top: 10px;">普通按钮</van-button>
					<van-button type="primary" size="small" style="margin-left: 10px;margin-top: 10px;">小型按钮</van-button>
					<van-button type="primary" size="mini" style="margin-left: 10px;margin-top: 10px;">迷你按钮</van-button>
				</div>
				<div style="color: #C8C9CC;height: 30px;line-height: 30px;">块级元素</div>
				<div style="display: inline-block;">
					<van-button type="primary" block style="margin-left: 10px;margin-top: 10px;">块级元素</van-button>
				</div>
				<div style="color: #C8C9CC;height: 30px;line-height: 30px;">页面导航</div>
				<div style="display: inline-block;">
					<van-button type="primary" url="vant-cell.html">URL 跳转</van-button>
					<van-button type="primary" to="vant-cell.html">路由跳转</van-button>
				</div>
				<div style="color: #C8C9CC;height: 30px;line-height: 30px;">自定义颜色</div>
				<div style="display: inline-block;">
					<van-button color="#7232dd">单色按钮</van-button>
					<van-button color="#7232dd" plain>单色按钮</van-button>
					<van-button color="linear-gradient(to right, #ff6034, #ee0a24)">
					  渐变色按钮
					</van-button>
				</div>
			</div>
		</div>
		<script>
			// 在 #app 标签下渲染一个按钮组件
			new Vue({
				el: '#app',
				
				data: {
				
				},
				
				methods: {
				
				},
				
				created() {
				
				},
				//template: '<van-button type="danger">默认按钮</van-button>'
				//template: `<van-cell title="单元格" value="内容" size="large" />`
			});
			// 调用函数组件，弹出一个 Toast
			//vant.Toast('提示');
		</script>
	</body>

</html>
